<script src="<?php echo base_url() ?>commons/validacion/js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="<?php echo base_url() ?>commons/estadistica/js/highcharts.js" type="text/javascript"></script>
<script src="<?php echo base_url() ?>commons/estadistica/js/modules/exporting.js" type="text/javascript"></script>
<script type="text/javascript">
    var tt = jQuery.noConflict();
    var chart;

    tt(document).ready(function() {
        // Radialize the colors
        Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
            return {
                radialGradient: {cx: 0.5, cy: 0.3, r: 0.7},
                stops: [
                    [0, color],
                    [1, Highcharts.Color(color).brighten(-0.3).get("rgb")] // darken
                ]
            };
        });
        // Build the chart
        tt("#container").highcharts({
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: "Estadística de pagos de semestre"
            },
            tooltip: {
                pointFormat: "{series.name}: <b>{point.percentage:.1f}%</b>"
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: "pointer",
                    dataLabels: {
                        enabled: true,
                        format: "<b>{point.name}</b>: {point.percentage:.1f} %",
                        style: {
                            color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || "black"
                        }
                    },
                    showInLegend: true
                }
            },
            series: [{
                    type: "pie",
                    name: "estadistica",
                    data: [
                        ["PAGADO <?php echo $sumaPagado ?>", <?php echo $sumaPagado ?>],
                        ["POR PAGAR <?php echo $total ?>", <?php echo $total ?>]
                    ]
                }]
        });
    });

</script>
<div>
<h1 class="titulo1">Estadística</h1>
<table class="CSSTableGenerator" data-graph-container-before="1" data-graph-type="column">

    <tr>
        <td>Financiado</td>
        <td>Pagado</td>
        <td>Restante</td>
    </tr>


    <tr>
        <td>$<?php echo $sumaTotal ?></td>
        <td>$<?php echo $sumaPagado ?></td>
        <td>$<?php echo $total ?></td>
    </tr>                        

</table>
</br>
<div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto">
</div>
</div>